<template>
  <div class="loading">
    <div class="content">
      <div class="icon-loading-img animate-rotate" />
      <!-- <div class="three animated faster animate-rotate" />
      <div class="two animated faster animate-rotate-reverse" />
      <div class="one animated faster animate-fade" /> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'Loading'
}
</script>

<style lang="scss" scoped>

  $rate: 0.6;
  $time: 1.5s;

  .loading{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    .content{
      position: relative;
      width: 78px*$rate;
      height: 78px*$rate;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-loading-img{
        height: 78px*$rate;
        width: 78px*$rate;
        background: url(~@/assets/imgs/icon/icon-loading-img.png) no-repeat;
        background-size: 100%;
      }
      // .three{
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 120px*$rate;
      //   height: 120px*$rate;
      //   background: url(~@/assets/imgs/icon/loading3.png) center center no-repeat;
      //   background-size: 100% 100%;
      //   box-sizing: border-box;
      // }
      // .two{
      //   position: absolute;
      //   top: 12px*$rate;
      //   left: 12px*$rate;
      //   width: 96px*$rate;
      //   height: 96px*$rate;
      //   background: url(~@/assets/imgs/icon/loading2.png) center center no-repeat;
      //   background-size: 100% 100%;
      //   box-sizing: border-box;
      // }
      // .one{
      //   position: absolute;
      //   top: 42px*$rate;
      //   left: 42px*$rate;
      //   width: 36px*$rate;
      //   height: 36px*$rate;
      //   background: #2c75d6;
      //   box-sizing: border-box;
      //   box-shadow: 0 0 16px*$rate #2c75d6;
      //   border-radius: 100%;
      // }
    }
    @keyframes rotate {
      from {
        transform: rotate(0)
      }

      to {
        transform: rotate(360deg)
      }
    }

    .animate-rotate {
      animation: rotate $time linear infinite;
    }
    @keyframes rotate-reverse {
      from {
        transform: rotate(0)
      }

      to {
        transform: rotate(-360deg)
      }
    }

    .animate-rotate-reverse {
      animation: rotate-reverse $time linear infinite;
    }

    .animate-fade{
      animation: fadeIn $time linear infinite alternate;
    }

  }
</style>
